import React from 'react';
import { StarO, WapHomeO, Star } from '@react-vant/icons'
const RentalInfo = () => {
    let navigate = React.$router.useNavigate();
    let { proid } = React.$router.useParams();
    const [Business, setBusiness] = React.useState(React.$cookie.load('User') ?? {})
    const [info, setInfo] = React.useState({
        thumbs_list: ['http://www.fastpros.com/uploads/20211015/1.jpg']
    })

    React.useEffect(() => {
        getProudctInfo()
    }, [])

    async function getProudctInfo() {
        let result = await React.$api.RentalInfo({
            proid: proid,
            busid: Business.id
        })
        if (result && result.code == 1) {
            setInfo(result.data)
        }
    }
    // 收藏 
    const Collection = () => {
        if (info.collect_statsu) {
            return (
                <Star color="#ffb2c3"  />
            )
        } else {
            return (
                <StarO  />
            )
        }
    }
    // 收藏事件
    const ChangeCollection = async () => {
        if (Object.values(Business).length > 0) {
            let result = await React.$api.RentalCollection({
                proid: proid,
                busid: Business.id ?? 0
            })
            if (result.code == 1) {
                React.$vant.Toast.success({
                    message: result.msg,
                })
                getProudctInfo();
            } else {
                React.$vant.Toast.fail(result.msg)
            }
        } else {
            React.$vant.Toast.info({
                message: '未登陆，请先登陆'
            })
            navigate('/business/login')
            return false;
        }
    }
    // 立即租聘
    const toLeasAdd = () =>{
        React.$cookie.save('product', {
            id: info.id,
            name: info.name,
            rent: info.rent,
            price: info.rent_price
        });
        navigate('/lease/add')
    }

    return (
        <>
            <React.$vant.NavBar
                title="租赁商品详情"
                leftText=""
                onClickLeft={() => navigate(-1)}
            />

            <div className="banner_shouy">
                <React.$vant.Swiper style={{ height: 230 }} autoplay={5000}>
                    {info.thumbs_list.map((item, index) => (
                        <React.$vant.Swiper.Item key={index}>
                            <React.$vant.Image lazyload src={item} fit="cover" />
                        </React.$vant.Swiper.Item>
                    ))}
                </React.$vant.Swiper>
            </div>

            <div className="top_title">
                <h2>{info.name}</h2>
                <div className="money">
                    <h3>￥{info.rent_price}</h3>
                    <p>押金:￥{info.rent}</p>
                </div>
                <div className="youhuiq common">
                    <div className="text">
                        <h2>保障</h2>
                        <div className="tb">
                            <div className="tis_fuwu">
                                <ul>
                                    <li className="no">保障</li>
                                    <li>保障</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="youhuiq common common_no">
                    <div className="text">
                        <h2>配送</h2>
                        <div className="tb">
                            送货上门
                        </div>
                    </div>
                </div>
            </div>
            <div className="rem2">  </div>
            <div className="xiang_qing_xp">
                {/* 覆盖DOM节点的innerHTML属性，并在内部显示传递的HTMl */}
                <div className="img_t" dangerouslySetInnerHTML={{ __html: info.content }} ></div>
            </div>
            <div style={{ height: '1rem' }}></div>

            <div className="zy_goods_foot dis_flex">
                <React.$vant.ActionBar>
                    <React.$vant.ActionBar.Icon
                        icon={<WapHomeO />}
                        text='首页'
                        onClick={() => navigate('/')}
                    />
                    <React.$vant.ActionBar.Icon
                        icon={<Collection />}
                        text='收藏'
                        onClick={() => ChangeCollection()}
                    />
                    <React.$vant.ActionBar.Button
                        type='danger'
                        text='立即租赁'
                        onClick={() => toLeasAdd()}
                    />
                </React.$vant.ActionBar>
            </div>
        </>
    )
}

export default RentalInfo;